<template>
	<div id=tmpl>
		<div class="slider">
			<slider :imgs="list"></slider>
		</div>
		
		<div id="buy">
			<h4 v-text="info.title"></h4>
			<p class="line"></p>
			<ul>
				<li class="price">
					市场价: <s>￥{{info.market_price}}</s> &nbsp;&nbsp;销售价：<span>￥{{info.sell_price}}</span>
				</li>
				<li class="inputli">
					购买数量： <count class="count" v-on:datacount="getcount"></count>
				</li>
				<li>
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click="tocar">加入购物车</mt-button>
				</li>
				
			</ul>
		</div>
		
		<div id="params">
				<h6>商品参数</h6>
				<p class="line"></p>
			<ul>
				<li>商品货号：{{info.goods_no}}</li>
				<li>库存情况：{{info.stock_quantity}}</li>
				<li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
			</ul>
		</div>
		
		<div id="other">
			<router-link v-bind="{to:'/goods/goodsdesc/'+id}">
				<mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
			</router-link>
			<router-link v-bind="{to:'/goods/goodscomment/'+id}">
				<mt-button type="danger" size="large">商品评论</mt-button>
			</router-link>
		</div>
	</div>
</template>

<script>
	import slider from "../subcom/slider.vue";
	import common from "../../kits/common.js";
	import count from "../subcom/count.vue";
	import {vm,COUNTSTR} from "../../kits/vm.js";
	import {valueObj,setItem} from "../../kits/localStr.js";
	export default {
		data(){
			return {
				list:[],
				id:0,
				info:{},
				datacount:0
			}
		},
		components:{slider,count},
		methods:{
			getimgs(){
				var url = common.apimain+"/api/getthumimages/"+this.id;
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						alert(res.body.message);
						return;
					}
					this.list=res.body.message;
				})
			},
			getinfo(){
				var url = common.apimain+"/api/goods/getinfo/"+this.id;
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						alert(res.body.message)
					};
					this.info=res.body.message[0];
				})
			},
			//獲取子組件傳入的值
			getcount(input){
				this.datacount=input;
			},
			tocar(){
				vm.$emit("countstr",this.datacount);
				valueObj.goodsid=this.id;
				valueObj.count=this.datacount;
				setItem(valueObj);
			}
		},
		created(){
			this.id=this.$route.params.id;
			this.getimgs();
			this.getinfo();
		}
	}
</script>

<style scoped>
	.slider {
		border: 1px solid rgba(0, 0, 0, 0.4);
		border-radius: 5px;
		margin: 5px;
	}
	#buy {
		padding: 5px;
		margin: 5px;
		border: 1px solid rgba(0,0,0,0.3);
		border-radius: 4px;
	}
	
	#buy h4 {
		color: #0094FF;
		padding: 6px;
	}
	.line {
		height: 1px;
		border: 1px solid rgba(0,0,0,0.2);
	}
	#buy li,#params li {
		list-style: none;
		padding: 8px;
	}
	#buy .price span{
		color:red;
	}
	#other .imgdesc{
		margin-bottom: 20px;
	}
	.inputli{
		position: relative;
	}
	.inputli .count {
		position: absolute;
		left:100px;
		top:5px;
	}
	
</style>